iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Modern Web

從零開始的Angular前端開發系列 第 20

# DAY 20 HttpClient (一)

  • 分享至 

  • xImage
  •  

拿到表單資料後,我們還要想辦法將資料傳出,送到後端做處理。所以我們要使用 HttpClient 來替我們傳送、接收資料。

要使用 HttpClient,顧名思義,我們要走的是 Http 協定。那麼我們今天會使用 Http 協定最常用的兩個 Method: GET 與 POST 。

GET 主要用在跟 Server 要資料,如果要傳參數給 Server,參數會夾在 URL 中一起傳出。所以一些比較隱私的資料不會用 GET 來傳,比如說帳號密碼,就不適合用 GET 來傳。

下面的這串網址是 Google Search 的 URL,問號後面就是傳給 Server 的參數,每一組參數用 & 分隔,所以你可以看到 q=123oq=123....參數,這些參數會送到 Server 做解析。

https://www.google.com/search?q=123&oq=123&aqs=chrome..69i57j69i60j69i65l2j69i60l2.247j0j7&sourceid=chrome&ie=UTF-8

POST 主要用在送資料給 Server,而要傳遞的資料會被保存在 Http 封包的 body 裡,和 GET 相比,比較不會被發現。

測試 API

要測試 API 能不能使用,有一個好用的工具 Postman,它可以使用各種 http Method,傳遞封包。

點 Download the App 再選擇 Windows 64-bits,接著安裝:


安裝好後開啟,應該會看到這樣的畫面:

![](https://i.imgur.com/clSv2lV.png
如果沒有就點加號,新增一個 request:

接下來我們可以設定要訪問的URL了,先測試看看 postman 提供的一個 API:

https://postman-echo.com/delay/3


然後按 Send 就能送出。
接著大約等 3 ~ 5 秒,就會收到回傳的 Response Data:

{
 "delay":   "3"
}

或是使用其他 API:

測試 Post 方法:


可以看到我們的URL 是沒有參數的,我們的資料{"ABC" : "123"}是被包在 form-data 裡面。

GET Html :


上一篇
# DAY 19 表單
下一篇
# DAY 21 HttpClient (二)
系列文
從零開始的Angular前端開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言